<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动和定位</title>
    <style>
        body, div {
            margin: 0;
            padding: 0;
        }
        #div1 {
            /*compatibility_001 只设置一个div浮动会在chorme和ie5,6,7上面的显示效果不一样 */
            float: left;
            margin-top: 30px;
            margin-left: 30px;
            width: 300px;
            height: 300px;
            background-color: #900;
            display: inline; /* only for IE*/
        }
        #div2 {
            /*compatibility_001 solution：在显示不同的元素上面也设置float: left */
            float: left;
            margin-top: 30px;
            margin-left: 30px;
            width: 400px;
            height: 300px;
            background-color: #090;
        }
        #div3 {
            /*compatibility_001 solution：在显示不同的元素上面也设置float: left */
            margin-top: 30px;
            margin-left: 30px;
            width: 400px;
            height: 300px;
            background-color: #009;
        }
        .clear {
            clear: both; /* 在 Chrome 中，让后面的块级元素重启一行（不受浮动的影响）*/
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <!--compatibility_002
        IE 在浮动中的一个bug
        只要同时满足这三个条件
        1. 块元素
        2. float: left;
        3. margin-left 不为0; 
        后果：margin-left计算会double
        解决：在第一个块级元素设置display: inline;
     -->
     <div class="clear"></div>
     <div id="div3"></div>
</body>
</html>